<title>{{ organization }}</title>
<link rel="icon" type="image" href="{{ logo }}" alt="{{ organization }} logo">
<script type="text/javascript">
  var require = {
    paths: {
      table_template: '{{ table_template }}'
    }
  }
</script>

<script type="text/javascript" src="app/config/common.js"></script>
<script type="text/javascript" src="app/config/jiff.js"></script>
<script data-main="app/track" src="app/vendor/require.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda-themeless.min.css"
      integrity="sha256-d7VZTlP9P3ZTCZ3Bkl8aGZ/+Vs4i+bpcOGNfibU7+LU=" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" href="styles/handsontable.full.min.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.10.0/css/alertify.min.css"
      integrity="sha256-bNEFYRlNlnu0CH4DIKCXv0F6JVl/DdA2M9XVZn317q0=" crossorigin="anonymous"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.10.0/css/themes/bootstrap.min.css"
      integrity="sha256-vt37wNLVK8ICNWGrl+1MLb+pjq33sn6v37Q/7OPgkSU=" crossorigin="anonymous"/>

<link rel="stylesheet" href="/styles/style.css">

</head>
<body>
<header>
<div class="container">
  <h1>Trusted Party<br/>
    <small>Live Session Manager</small>
  </h1>
  <div id="logos">
    <img src="{{ logo }}" alt="{{ organization}} Logo"/>
    <img src="images/bu.gif" alt="BU Logo"/>
  </div>
</div>
</header>

<div id="shadow" class="ss-style-multitriangles"></div>
<main id="content" class="container">
</main>
<div class="container">
  <div class="row" id="session-content">
    <div class="col-md-4" id="session-content-left">
      <section class="card">
        <div id="session-login" class="collapse in">
          <h2 class="text-center">Enter session details</h2>
          <hr/>
          <form>
            <div class="form-group">
              <label class="control-label" for="session">{{ session_key }}</label>
              <input type="text" id="session" class="form-control" placeholder="{{ session_key }}" pattern="^[a-zA-Z0-9]{26}$"
              autocomplete="off" required/>
              <span id="session-success" class="success-icon glyphicon glyphicon-ok form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="session-fail" class="fail-icon glyphicon glyphicon-remove form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="session-fail-help"
                    class="fail-help help-block hidden">Please input the 26-character {{ session_key }}.</span>
              <span id="session-fail-custom-help"
                    class="fail-custom help-block hidden"></span>
            </div>
            <div class="form-group">
              <label class="control-label" for="password">Session password</label>
              <input type="password" id="password" class="form-control" placeholder="Session password" autocomplete="off" required>
              <span id="password-success"
                    class="success-icon glyphicon glyphicon-ok form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="password-fail" class="fail-icon glyphicon glyphicon-remove form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="password-fail-help"
                    class="fail-help help-block hidden">Please input the session password.</span>
              <span id="password-fail-custom-help"
                    class="fail-custom help-block hidden"></span>
            </div>
            <div class="form-group">
              <button type="submit" id="login" class="btn btn-primary ladda-button btn-lg btn-block">Submit</button>
            </div>
          </form>
        </div>

        <div id="session-panel" class="collapse">
          <h2 class="text-center">Manage your session</h2>
          <p class="text-center">Session status: <span id="session-status"></span></p>
          <p id="session-unmask" class="hidden">Click <a href="">here</a> to unmask session data.</p>
          <form id="session-manage">
            <button type="submit" id="session-start" class="btn btn-success btn-block">Start</button>
            <button type="submit" id="session-pause" class="btn btn-warning btn-block">Pause</button>
            <button type="submit" id="session-stop" class="btn btn-danger btn-block"
                    data-toggle="modal" data-target="#session-stop-modal">Stop
            </button>
          </form>

          <div id="session-stop-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title">Close session</h4>
                </div>
                <div class="modal-body">
                  <p class="text-danger">Are you sure you wish to permanently close the session? Participants will no longer be able to submit data!</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                  <button id="session-close-confirm" type="button" class="btn btn-danger"
                          data-dismiss="modal">Close session
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

      <section id="cohort-card" class="card col-sm-7 col-md-offset-1 collapse">
        <div>
            <h2 class="text-center">Create New {{ cohort }}</h2>
            <hr/>
            <form id="cohort-entry">
              <div class="form-group">
                <label class="control-label" for="cohort-number">Enter {{ cohort }} Name</label>
                <input type="text" id="cohort-input" class="form-control" pattern="^[a-zA-Z0-9]{26}$" placeholder="{{ cohort }} name" autocomplete="off" required/>
              </div>
              <div class="form-group">
                <button type="submit" id="cohort-generate" class="btn btn-block btn-primary">Generate</button>
              </div>
            </form>
        </div>
      </section>

  </div>
  <div id="cohort-area"></div>
</div>
</body>
</html>
